<!DOCTYPE html>
<html
        layout:decorator="component/mainLayout"
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        lang="en" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>超市资讯</title>
<style>

    .comment-text{
        display: inline-block;
        margin-left: 10px;
    }
    .comment-text div:nth-child(2){
        margin-top: 5px;
    }

</style>
</head>
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/layui/css/template.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/bootstrap/bootstrap.5u.min.css" media="all"/>
<script src="/layui/layui.js" charset="utf-8"></script>
<body layout:fragment="contentCenter">
    <div class="layui-fluid" style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header" style="text-align: center;font-size: 18px">[[${notice.noticeTitle}]]</div>
                    <div class="layui-card-body" style="height: 115px">
                        &nbsp;&nbsp;&nbsp;&nbsp;[[${notice.noticeContent}]]
                    </div>
                </div>
            </div>
        </div>
    </div>
    <blockquote class="layui-elem-quote" style="background-color: #eae1e1;">畅所欲言
        <span id="commentBtn" style="color:#0dbfaf;float: right;margin-right: 20px;margin-top: 10px;font-size: 16px;text-decoration: #00c853">我要吐槽</span>
    </blockquote>
    <div class="list-group">
        <div class="list-group-item">
            <img class="mdui-card-header-avatar" src="/image/girl.jpg"/>
            <div class="comment-text">
                <div>
                    2019年3月21日23点03分
                </div>
                <div>
                    哈哈哈哈哈哈哈哈哈哈哈哈
                </div>
            </div>
        </div>
    </div>
    <div th:each="comment : ${comentList}" class="list-group">
        <div class="list-group-item">
            <img class="mdui-card-header-avatar" src="/image/pigOne.jpg"/>
            <div class="comment-text">
                <div>
                    [[${#dates.format(comment.createDatetime,'yyyy年MM月dd日 HH点mm分ss秒')}]]
                </div>
                <div>
                    [[${comment.commentContent}]]
                </div>
            </div>
        </div>
    </div>
    <!--<div class="layui-row" style="z-index: 10;position: fixed;width: 73.4%;bottom: 13px;">-->
        <!--<form class="layui-form">-->
            <!--<div class="layui-form-item layui-form-text">-->
                <!--<div class="">-->
                    <!--<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class=" layui-input-right" style="float: right">-->
                <!--<button class="layui-btn" lay-submit lay-filter="formDemo">发表</button>-->
            <!--</div>-->
        <!--</form>-->
    <!--</div>-->
<script>
    $(document).ready(function () {
        sliderCollapse.open('#noticeCollapse');
    })

    var layui = layui.use(['form', 'laydate','upload','element','layer'], function(){
        var $ = layui.$
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,form = layui.form;
        $("#commentBtn").click(function () {
            let noticeId = '[[${noticeId}]]';
            layer.open({
                // type: 1,
                title: '吐槽',
                // closeBtn: 0,
                area: '516px',
                // skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                shift:2,
                btn:'发表',
                content: '<div class="layui-form-item layui-form-text">\n' +
                    '                <div class="">\n' +
                    '                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea" id="commentContent"></textarea>\n' +
                    '                </div>\n' +
                    '            </div>',
                yes:function (index, layero) {
                    let commentContent = $("#commentContent").val();
                        $.ajax({
                        type: "POST",
                        data: {
                            commentContent:commentContent,
                            noticeId:noticeId
                        },
                        url: "/notice/saveNoticeComment",
                        success: function (data) {
                            if (data.status===200){
                                layer.alert("已吐槽！", {icon: 1});
                                location.href = "/notice/noticeDetail?noticId="+noticeId;
                            }else{
                                mdui.snackbar({
                                    message: data.status===200?'已吐槽':'吐槽失败',
                                    buttonText: 'OK',
                                    timeout:700,
                                    onClose: function () {
                                    }
                                });
                            }
                        },
                        error: function (request) {
                            mdui.snackbar({
                                message: '吐槽失败,未知错误',
                                buttonText: 'OK',
                            });
                        }
                    })
                }
            });
        })


    })
    </script>
</body>
</html>